<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			#top{
				width: 500px;
				height: 500px;
				background: deepskyblue;
			}
			
			#middle{
				width: 300px;
				height: 300px;
				background: deeppink;
			}
		</style>
	</head>
	<body>
		<div id="top">
			
		</div>
		
		<div id="middle"></div>
		<script>
//			事件类型

			//load 加载完成
			//click 点击
			//dblclick 双击
			//mousemove 鼠标移动
			//mouseover 鼠标覆盖
			//focus 获取焦点
			//blur 失焦
			//keydown 键盘按下
			//keypress 键盘长按
			
			
			//html 和  JavaScript依靠事件驱动
			
			//event
			
		
			
			//addEventListener
			//添加事件监听	
			
			var Top = document.getElementById('top');
			var middle = document.getElementById('middle');
			Top.addEventListener('click', consoleTop());
			Top.addEventListener('click', function (){
				console.log('123');
			});
			
			
			//removeEventListener
			//移除事件监听
			
//			Top.removeEventListener('click', consoleTop()};
			
			//如果需要反复添加和移除相同的监听事件，那么最好使用具名函数。
			
			function consoleTop(){
				console.log('top');
			}
			
			//注册 监听事件      无限叠加	先移除再增加
			//和onclick一类不同，onclick上的function可以直接覆盖
			
			
			middle.onclick = function (){
				alert('123');
			}
			middle.onclick = function (){
				alert('456');
			}
			
			
			//事件冒泡
			
			//addEventListener(),第三个参数  true / false 
			
			//false： 事件冒泡 (默认值)
			//true： 事件捕获
			
			//stopPropagation() 阻断事件捕获和事件冒泡
		</script>
	</body>
</html>
